<script setup>
import {ref, watch} from "vue";

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'input'
  },
  rows: {
    type: Number,
    default: 5
  },
  maxlength: {
    type: Number,
    default: 1024
  }
})

const model = ref(props.value)

watch(() => props.value, (newVal) => {
  model.value = newVal
})

const emits = defineEmits(['update:value'])
const onInput = (value) => {
  emits('update:value', value)
}

</script>

<template>
  <div class="black-input-wrapper">
    <el-input
        v-model="model"
        :type="type"
        :rows="rows"
        @input="onInput"
        resize="none"
        :placeholder="placeholder"
        :maxlength="maxlength"/>
    <div class="word-stat" v-if="rows > 1">
      <span>{{value.length}}</span>/<span>{{maxlength}}</span>
    </div>
  </div>
</template>

<style lang="stylus">
.black-input-wrapper {
  position relative

  .el-textarea__inner {
    padding: 20px;
    font-size: 16px;
  }

  .word-stat {
    position: absolute;
    bottom 10px
    right 10px
    color rgb(209 203 199)
    font-family: Neue Montreal, ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-size .875rem
    line-height 1.25rem

    span {
      margin 0 1px
    }
  }
}
</style>